<!--info.less-->
<template>
	<section id="systemSet">
		<HeaDer :Title='titleData'></HeaDer>
		<section class="systemSetWarp">
			<section class="title">
				<h2>系统设置</h2>
			</section>
			<ul class="lisWarp">
				<li class="lis" @click="exit">
					<i class="van-icon van-icon-records"></i>
					<span>退出登录</span>
					<i class="van-icon van-icon-arrow"></i>
				</li>
				<li class="lis" @click="show='true'">
					<i class="van-icon van-icon-exchange"></i>
					<span>语言选择</span>
					<i class="van-icon van-icon-arrow"></i>
				</li>
				<li class="lis switch">
					<i class="van-icon van-icon-edit-data"></i>
					<span>夜间模式</span>
					<van-switch v-model="checked" @change="changeSwitch" />
				</li>
			</ul>
		</section>

		<van-popup v-model="show" position="right" :overlay="false">
			<section class="langeWarp">
				<section class="return" @click="show=false">
					<i class="van-icon van-icon-arrow-left"></i>
				</section>
				<section class="title">
					<h2>语言选择</h2>
				</section>
				<van-radio-group v-model="radio" @change='changeLange'>
					<van-cell-group>
						<van-cell :title="changeName[0]" clickable @click="radio='1'">
							<van-radio name="1" />
						</van-cell>
						<van-cell :title="changeName[1]" clickable @click="radio='2'">
							<van-radio name="2" />
						</van-cell>

					</van-cell-group>
				</van-radio-group>
			</section>
		</van-popup>
	</section>
</template>

<script>
	import HeaDer from "../common/header.vue";
	export default {
		data() {
			return {
				titleData: {
					name: '',
					flat: 1
				},
				changeName: ['中文', '英文'],
				checked: false,
				show: false,
				radio: '1'
			}
		},
		methods: {
			//退出登录执行函数
			exit() {
				var _this = this;
				_this.$dialog.confirm({
					title: '提示',
					message: '您真的要退出登录吗'
				}).then(() => {
					sessionStorage.clear();
					_this.$public.go('info', 200, _this);
				}).catch(() => {
					// on cancel
				});
			},
			//模式切换执行函数
			changeSwitch(val) {				
			},
			//语言模式切换
			changeLange(name){
				var _this = this;
				var lange = null;
				switch (name) {
					case '1':
					lange='cn';
					break;
					case '2':
					lange='en';
					break;
					
				}
				_this.$i18n.locale = lange;
				window.localStorage.setItem('language', lange)
			}
		},
		components: {
			'HeaDer': HeaDer

		},
		created: function() {
			if(!window.localStorage.getItem('language')){
				this.radio = '1';
			}else{
				switch (window.localStorage.getItem('language')){
					case 'cn':
					this.radio = '1';
					break;
					case 'en':
					this.radio = '2';
					break;
				}
			}
		}
	}
</script>

<style>

</style>